<template>
  <NuxtLink
    :to="`/tools?categoryId=${category.id}`"
    class="category-card card p-6 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 cursor-pointer group text-center relative overflow-hidden"
  >
    <!-- 装饰性背景 -->
    <div class="absolute inset-0 bg-gradient-to-br from-primary-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    
    <!-- 图标 -->
    <div class="relative z-10 w-16 h-16 mx-auto mb-4 flex items-center justify-center bg-gradient-to-br from-primary-100 to-purple-100 dark:from-primary-900/30 dark:to-purple-900/30 rounded-2xl group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-md">
      <Icon
        v-if="category.icon"
        :name="category.icon"
        class="w-8 h-8 text-primary-600 dark:text-primary-400 group-hover:scale-110 transition-transform"
      />
      <Icon
        v-else
        name="heroicons:folder"
        class="w-8 h-8 text-primary-600 dark:text-primary-400 group-hover:scale-110 transition-transform"
      />
    </div>

    <!-- 分类名称 -->
    <h3 class="relative z-10 font-bold text-base mb-2 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
      {{ category.name }}
    </h3>

    <!-- 工具数量 -->
    <p class="relative z-10 text-sm text-gray-500 dark:text-gray-400 flex items-center justify-center gap-1">
      <span class="inline-block w-1.5 h-1.5 rounded-full bg-green-500"></span>
      {{ category.tools?.length || 0 }} 个工具
    </p>
  </NuxtLink>
</template>

<script setup lang="ts">
import type { Category } from '~/types'

defineProps<{
  category: Category
}>()
</script>

